<template>
  <div>
    <waiting :waitingForYou="loadingData" :updateData="!updateData"></waiting>
    <div  v-if="!loadingData" class="wrap-list">
    <div class="filter-goods">
      <div class="goods-detail">
        <div class="goods-img">
          <img :src="picURL + goods.pic" alt="商品图片示例" width="120px" height="120">
          <div class="collect-icon" @click="">
            <img :src="goods.isCollected ? collected : collect" alt="收藏图标" width="16" height="16">
          </div>
        </div>
        <div class="goods-info">
          <h2>{{goods.name}}</h2>
          <p class="little-info">产地：{{goods.sub_chanqu}}</p>
          <p class="little-info">等级：{{goods.grade}}</p>
          <p class="little-info">酒庄出厂价：<span v-if="hasHeader">{{goods.min1 | filterNull}}-{{goods.max1 | filterNull}}</span><router-link v-else to="/login">登录可见</router-link></p>
          <p class="little-info">国内现货价：<span v-if="hasHeader">{{goods.min2 | filterNull}}-{{goods.max2 | filterNull}}</span><router-link v-else to="/login">登录可见</router-link></p>
        </div>
      </div>
      <p class="spot"><span>亮点：</span>{{goods.liangdian}}</p>
    </div>
    <div class="filter-all-sort">
      <div v-for="(filterSort, index) of filterSorts" :key="index" :style="filterSort.style" class="sorting-one" @click="sorting(index)">
        <p :class="{'is-filtering': filterSort.isFiltering}">
          {{filterSort.name}}
          <span>{{filterSort.oneRule}}</span>
          <span class="img-filter"><img :src="filterSort.isFiltering ? filterTop : filterBottom"></span>
        </p>
      </div>
      <div v-for="(filterSort, index) of filterSorts" :key="index" class="filter-start" v-show="changeSort === index">
        <p v-for="(select, index2) of filterSort.sortRules" :key="index2" :class="[{'selected-sort': filterSort.changeRule === index2}, {'year-vol': filterSort.name !== '排序：'}]" @click="changeOneSort(index, index2)">
          {{select}}
          <img v-if="filterSort.changeRule === index2 && filterSort.name === '排序：'" src="../assets/picture/select-sort.png" width="17" height="17">
        </p>
      </div>
    </div>
    <div class="filter-bg" v-show="changeSort !== ''" @touchstart="hideSort()"></div>
    <table class="goods-list" v-if="updateData">
      <tr>
        <th class="add-time goods-detail-info">时间</th>
        <th class="year goods-detail-info">年份</th>
        <th class="vol goods-detail-info">规格</th>
        <th class="o-price goods-detail-info">出厂价</th>
        <th class="price">到港价</th>
        <th class="inventory">库存</th>
        <th class="goods-at goods-detail-info">货源地</th>
        <th class="empty-go-detail">&nbsp;</th>
      </tr>
      <tr v-for="(oneGoods, index) of goods.goods" :key="index" @click="goodsDetail(oneGoods.id)">
        <td>{{oneGoods.addTime.substr(2).split('-').join('/')}}</td>
        <td>{{oneGoods.year}}</td>
        <td>{{oneGoods.vol}}</td>
        <td><span v-if="hasHeader">{{oneGoods.o_price}}</span><a class="login-go" v-else @click="preventDetail($event)">登录</a></td>
        <td><span v-if="hasHeader">{{oneGoods.price}}</span><a class="login-go" v-else @click="preventDetail($event)">登录</a></td>
        <td>{{oneGoods.inv ? oneGoods.inv : oneGoods.inventory}}</td>
        <td>{{oneGoods.goodsAt}}</td>
        <td><img :src="filterSelected" width="16" height="16"></td>
      </tr>
    </table>
    </div>
  </div>
</template>

<script>
  import waiting from '../components/waiting'

  import filterBottom from '../assets/picture/filter-bottom.png'
  import filterTop from '../assets/picture/filter-top.png'
  import filterOk from '../assets/picture/select-sort.png'
  import filterSelected from '../assets/picture/select-right.png'
  import collect from '../assets/picture/collect-origin.png'
  import collected from '../assets/picture/collected-origin.png'
  export default {
    name: 'sortRule',
    components: {
      waiting
    },
    data () {
      return {
        filterBottom: filterBottom,
        filterTop: filterTop,
        filterOk: filterOk,
        filterSelected: filterSelected,
        collect: collect,
        collected: collected,
        goods: '',
        picURL: this.$utils.fineURL(),
        changeSort: '',
        filterSorts: [
          {name: '排序：', oneRule: '综合', isFiltering: false, changeRule: 0, sortRules: ['综合排序', '最新发布时间', '库存由高到低', '价格由高到低', '价格由低到高'], style: {width: '34%'}},
          {name: '规格：', oneRule: '不限', isFiltering: false, changeRule: 0, sortRules: ['不限'], style: {width: '33%'}},
          {name: '年份：', oneRule: '不限', isFiltering: false, changeRule: 0, sortRules: ['不限'], style: {width: '33%'}}
        ],
        hasHeader: '',
        orderBy: 0,
        vols: '',
        years: '',
        loadingData: true,   // 判断是否正在加载数据
        updateData: true,
        inventory: ''
      }
    },
    created () {
      this.hasHeader = this.$utils.getCookie('USER_NAME')
    },
    mounted () {
      console.log(this.$route.params.goodsId)
      this.filterGoods()
    },
    methods: {
      // 请求数据
      filterGoods () {
        this.$http({
          method: 'post',
          url: this.$utils.fineURL() + '/m/ajax_goods_info.htm',
          headers: {'USER_NAME': this.hasHeader},
          params: {id: this.$route.params.goodsId, orderBy: this.orderBy, vols: this.vols, years: this.years},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.goods = response
          for (var i = 0; i < this.filterSorts.length; i++) {
            if (this.filterSorts[i].name === '规格：') {
              console.log(response.vols)
              this.filterSorts[i].sortRules = this.filterSorts[i].sortRules.concat(response.vols)
            } else if (this.filterSorts[i].name === '年份：') {
              this.filterSorts[i].sortRules = this.filterSorts[i].sortRules.concat(response.years)
            }
          }
          this.loadingData = false
          this.updateData = true
        }, function (response) {
          console.log(response)
          this.loadingData = false
        })
      },
      sorting (index) {
        this.changeSort = index
        if (this.filterSorts[index].isFiltering) {
          this.filterSorts[index].isFiltering = false
          this.changeSort = ''
          return
        }
        for (var i = 0; i < this.filterSorts.length; i++) {
          this.filterSorts[i].isFiltering = false
        }
        this.filterSorts[index].isFiltering = true
      },
      changeOneSort (index, index2) {
        this.filterSorts[index].isFiltering = false
        this.filterSorts[index].changeRule = index2
        this.changeSort = ''
        if (this.filterSorts[index].name === '排序：') {
          if (this.filterSorts[index].oneRule === this.filterSorts[index].sortRules[index2].substr(0, 2)) {
            return
          }
        } else {
          if (this.filterSorts[index].oneRule === this.filterSorts[index].sortRules[index2]) {
            return
          }
        }
        this.updateData = false
        this.filterSorts[index].oneRule = this.filterSorts[index].sortRules[index2]
        if (this.filterSorts[index].name === '排序：') {
          this.filterSorts[index].oneRule = this.filterSorts[index].sortRules[index2].substr(0, 2)
          this.orderBy = index2
        } else if (this.filterSorts[index].name === '规格：') {
          this.vols = this.filterSorts[index].sortRules[index2]
          if (this.vols === '不限') {
            this.vols = ''
          }
        } else if (this.filterSorts[index].name === '年份：') {
          this.years = this.filterSorts[index].sortRules[index2]
          if (this.years === '不限') {
            this.years = ''
          }
        }
        this.goods.goods = ''
        this.filterGoods()
      },
      hideSort () {
        this.changeSort = ''
        for (var i = 0; i < this.filterSorts.length; i++) {
          this.filterSorts[i].isFiltering = false
        }
      },
      goodsDetail (oneGoodsId) {
        this.$router.push({path: '/goods-detail', query: {id: oneGoodsId}})
      },
      preventDetail (event) {
        event = window.event || event
        event.stopPropagation()
        event.preventDefault()
        this.$router.push({path: '/login'})
      }
    }
  }
</script>

<style scope lang="scss">
  .wrap-list{
    position: relative;
  }
  .login-go{
    color: #e92d46;
  }
  .filter-goods{
    padding-bottom: 13px;
    border-bottom: 1px solid #f5f5f5;
    .goods-detail{
      display: block;
      border-top: 1px solid #f5f5f5;
      overflow: hidden;
      .goods-img{
        float: left;
        margin: 13px 36px 13px 15px;
        position: relative;
        width: 120px;
        height: 120px;
        .collect-icon{
          position: absolute;
          right: 5px;
          top: 4px;
        }
      }
      .goods-info{
        float: left;
        margin-top: 36px;
        width: calc(100% - 186px);
        h2{
          font-size: 12px;
          color: #000000;
          margin-bottom: 2px;
        }
        p.little-info{
          font-size: 12px;
          color: #555555;
          margin-bottom: 2px;
          span, a{
            color: #e92d46;
          }
        }
      }
    }
    .spot{
      font-size: 12px;
      color: #555555;
      margin: 0 12px;
      span{
        color: #000000;
      }
    }
  }
  .filter-all-sort{
    height: 40px;
    line-height: 40px;
    position: relative;
    .sorting-one{
      float: left;
      overflow: hidden;
      text-align: center;
      p{
        font-size: 15px;
        color: #000000;
        &.is-filtering{
          color: #e92d46;
        }
        span{
          font-size: 15px;
          color: #e92d46;
          img{
            vertical-align: middle;
          }
        }
      }
    }
    .filter-start{
      width: 100%;
      position: absolute;
      top: 40px;
      z-index: 99;
      background: #ffffff;
      p{
        margin: 0 12px;
        border-bottom: 1px solid #f5f5f5;
        font-size: 15px;
        color: #000000;
        position: relative;
        &.selected-sort{
          color:#e92d46;
        }
        img{
          position: absolute;
          right: 18px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      p.year-vol{
        border: 1px solid #bbbbbb;
        border-radius: 3px;
        text-align: center;
        height: 45px;
        line-height: 45px;
        float: left;
        width: calc(25% - 20px);
        margin: 0 9px 9px 9px;
      }
      p.year-vol.selected-sort{
        border: 1px solid #e92d46;
        color: #e92d46;
      }
    }
  }
  .filter-bg{
    background: #000000;
    opacity: 0.2;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .goods-list{
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    overflow: hidden;
    table-layout: fixed;
    tr{
      height: 40px;
      vertical-align: middle;
      &:nth-child(odd){
        background: #f5f5f5;
      }
      th{
        font-size: 12px;
        color: #444444;
        font-weight: normal;
        overflow: hidden;
        &.goods-detail-info{
          width: 40px;
        }
        &.add-time.goods-detail-info{
          width: 60px;
        }
        &.price{
          width: 40px;
        }
        &.inventory{
          width: 60px;
        }
        &.empty-go-detail{
          width: calc(100% - 320px);
        }
      }
    }
  }
</style>
